import React from "react";

export default function Footer({ type, handleUpdateType }) {
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => handleUpdateType("all")}
            className={type === "all" ? "selected" : ""}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => handleUpdateType("active")}
            className={type === "active" ? "selected" : ""}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => handleUpdateType("completed")}
            className={type === "completed" ? "selected" : ""}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}
